spb/hilmacorp

1/**2 * Author: Simon-Pierre Boucher3 * Contact: contact@spboucher.ai4 * Project: Hilmacorp.ai — Web Platform5 * File: app/[locale]/about/page.tsx6 * Description: About page — mission, iterative eight-step approach, principles, and company vision7 */89import type { Metadata } from "next";10import Container from "@/components/Container";11import SectionHeading from "@/components/SectionHeading";12import { getMessages, isLocale, type Locale } from "@/lib/i18n";1314export async function generateMetadata({15  params,16}: {17  params: Promise<{ locale: string }>;18}): Promise<Metadata> {19  const { locale } = await params;20  if (!isLocale(locale)) return {};21  const { meta } = getMessages(locale);22  return { title: { absolute: meta.about.title }, description: meta.about.description };23}2425export default async function AboutPage({26  params,27}: {28  params: Promise<{ locale: string }>;29}) {30  const { locale } = await params;31  const { about } = getMessages(locale as Locale);3233  return (34    <>35      <section className="relative overflow-hidden border-b border-line">36        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />37        <Container className="relative py-20 sm:py-28">38          <SectionHeading as="h1" title={about.title} lead={about.lead} />39        </Container>40      </section>4142      {/* Mission */}43      <section className="py-20 sm:py-24">44        <Container className="grid gap-10 lg:grid-cols-[1fr_2fr]">45          <h2 className="font-display text-2xl font-semibold tracking-tight text-accent">46            {about.missionTitle}47          </h2>48          <p className="text-lg leading-relaxed text-ink">{about.missionBody}</p>49        </Container>50      </section>5152      {/* Approach — 8 steps */}53      <section className="border-t border-line bg-paper-2 py-20 sm:py-24">54        <Container>55          <SectionHeading title={about.approachTitle} lead={about.approachLead} />56          <ol className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">57            {about.steps.map((step, index) => (58              <li59                key={step.title}60                className="rounded-2xl border border-line bg-card p-6"61              >62                <p className="font-mono text-sm text-accent">63                  {String(index + 1).padStart(2, "0")}64                </p>65                <h3 className="mt-3 text-base font-semibold text-ink">{step.title}</h3>66                <p className="mt-2 text-sm leading-relaxed text-ink-faint">{step.body}</p>67              </li>68            ))}69          </ol>70        </Container>71      </section>7273      {/* Principles */}74      <section className="py-20 sm:py-24">75        <Container>76          <SectionHeading title={about.principlesTitle} lead={about.principlesLead} />77          <ul className="mt-12 grid gap-x-12 gap-y-10 sm:grid-cols-2">78            {about.principles.map((principle) => (79              <li key={principle.title} className="border-l-2 border-accent pl-6">80                <h3 className="font-display text-xl font-semibold text-ink">81                  {principle.title}82                </h3>83                <p className="mt-2 leading-relaxed text-ink-soft">{principle.body}</p>84              </li>85            ))}86          </ul>87        </Container>88      </section>8990      {/* Vision */}91      <section className="border-t border-line bg-ink py-20 sm:py-24">92        <Container className="grid gap-10 lg:grid-cols-[1fr_2fr]">93          <h2 className="font-display text-2xl font-semibold tracking-tight text-paper">94            {about.visionTitle}95          </h2>96          <div className="space-y-5">97            <p className="text-lg leading-relaxed text-paper/80">{about.visionBody1}</p>98            <p className="text-lg leading-relaxed text-paper/80">{about.visionBody2}</p>99          </div>100        </Container>101      </section>102    </>103  );104}105